<template>
	<u-upload
		:fileList="fileList1"
		@afterRead="afterRead"
		@delete="deletePic"
		name="1"
		:maxCount="maxCount"
		:disabled="disabled"
		:deletable="deletable"
		:multiple="multiple"
	></u-upload>
</template>

<script>
import { urls } from '@/utils/config.js'
export default {
    props: {
        value: { type: Array, default: function () { return [] } },
        data: { type: Object, default: function () { return {} } },
        maxCount: { type: Number, default: 1 },
		disabled:{ type: Boolean, default: function () { return false } },
		deletable:{ type: Boolean, default: function () { return false } },
		multiple:{ type: Boolean, default: function () { return true } },
		fileSize: { type: Number, default: 10 }
    },
    data() {
        return {
            fileList1: [],
        }
    },
    watch: {
        'value': function(newValue) {
            this.initData(newValue)
        }
    },
    methods: {
        // 对比并初始化数据
        initData(newValue) {
			console.log(this.disabled,this.deletable,'========>')
            if (!this.compareList(newValue, this.fileList1)) {
                this.fileList1.length = 0
                const res = newValue.map(v => {
                    return { name: v.name, url: v.url, status: "success", type: "image" }
                })
                this.fileList1.push(...res)
            }
        },
        // 比较数组差异
        compareList(a = [], b = [], keys = []) {
            let pass = a.length == b.length
            for (let i = 0; i < a.length; i++) {
                keys.forEach(k => {
                    if (a[i][k] != b[i][k]) pass = false
                })
            }
            return pass
        },
        // 删除图片
        deletePic(event) {
            this[`fileList${event.name}`].splice(event.index, 1)
            this.$emit('change', this.fileList1)
        },
        // 新增图片
        async afterRead(event) {
			if (event.file && event.file.length > 0) {
				for (var i = event.file.length - 1; i >= 0; i--) {
					event.file[i].isSize = event.file[i].size / 1024 / 1024 // 文件大小
					if (event.file[i].isSize > this.fileSize) {
						uni.showToast({
							title: '仅支持上传' + this.fileSize + 'M内的图片',
							icon: 'none'
						})
						event.file.splice(i, 1)
					}
				}
			}
            // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
            let lists = [].concat(event.file)
            let fileListLen = this[`fileList${event.name}`].length
            lists.map((item) => {
                this[`fileList${event.name}`].push({
                    ...item,
                    status: 'uploading',
                    message: '上传中'
                })
            })
            for (let i = 0; i < lists.length; i++) {
                const result = await this.uploadFilePromise(lists[i].url)
                let item = this[`fileList${event.name}`][fileListLen]
                this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
                    status: 'success',
                    message: '',
                    name: result.name,
                    url: result.url
                }))
                fileListLen++
            }
            this.$emit('change', this.fileList1)
        },
        uploadFilePromise(url) {
            return new Promise((resolve, reject) => {
                let a = uni.uploadFile({
                    url: urls.uploadUrl + '/zcy-material-core-web/api/material/work/order/importMaterialInfo', // 接口地址
                    filePath: url,
                    header: {
                        // Authorization: storage.load('token') // http.getHeader('Authorization')
                    },
                    name: 'file',
                    formData: {
                        ...this.data
                    },
                    success: (res) => {
                        if (typeof res.data == 'string') {
                            res.data = JSON.parse(res.data)
                        }
                        setTimeout(() => {
                            resolve(res.data.data[0])
                        }, 200)
                    }
                });
            })
        },
    }

}
</script>
